﻿@model RechargeControllerModel.Index
<div class="ui-box ui-box-alpha">
    <div class="ui-box-head">
        <div class="ui-box-head-border">
            <div class="ui-box-head-title">
                充 值</div>
            <a href="#" class="ui-box-head-more">去购物</a>
        </div>
    </div>
    <div class="ui-box-container">
        <div class="ui-box-content ui-box-content-special">
            <div class="row-fluid">
                <div class="span4">
                    <p>
                        充值账户： <span class="ft-weight-bold">@(User.Identity.Name)</span></p>
                </div>
                <div class="span4">
                    <p>
                        账户余额：<span class="ft-green ft-weight-bold">
                            @(Model.Account.AvailableCash.ToString("N"))<small class="ft-gray ft-weight-normal">(元)</small></span></p>
                </div>
                <div class="span4">
                    <span>充值资金不能用于提现。</span>
                </div>
            </div>
        </div>
    </div>
    <div class="ui-box-container-noborder">
        <div class="ui-box-content">
        </div>
    </div>
    <div class="ui-box-container-noborder">
        <div class="ui-box-container-head">
            请选择充值套餐</div>
        <div class="ui-box-content">
            <div class="row-fluid">
                <ul class="thumbnails">
                    @foreach (var o in Model.Packages)
                    {
                        <li class="package-item" onclick="setPackage(this,@(o.Id));">
                            <div class="thumbnail">
                                <img alt="260x180" data-src="holder.js/260x180" style="width: 260px; height: 180px;"
                                    src="">
                                <h4>
                                    @o.Title</h4>
                                <p>
                                    @o.PackageDesc</p>
                            </div>
                        </li>
                    }
                    <li class="package-item package-item-selected" onclick="setPackage(this,0);">
                        <div class="thumbnail">
                            <img alt="260x180" data-src="holder.js/260x180" style="width: 260px; height: 180px;"
                                src="">
                            <h4>
                                xxx</h4>
                            <p>
                                xxx</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="ui-box-container-noborder">
        <div class="ui-box-container-head">
            请选择充值方式</div>
        <div class="ui-box-content">
            <form id="recharge-by-debit-card" action="/recharge/debit" method="get" onsubmit="return rechargeSubmit(this);">
            <div class="ebank ebank-express">
                <div>
                    <h4>
                        快捷支付</h4>
                </div>
                <ul class="unstyled inline">
                    @foreach (var e in Model.EBanks)
                    {
                        <li>
                            <label title="@(e.PaymentBank.Name)">
                                <input type="radio" name="param" value="@(e.Id)" data-platform="@(e.PlatformId)"/>
                                <img alt="@(e.PaymentBank.Name)" src="@(WebSite.Static + e.PaymentBank.Image)" />
                            </label>
                        </li>
                    }
                </ul>
            </div>
            <div class="ebank">
                <div>
                    <h4>
                        网银支付</h4>
                </div>
                <ul class="unstyled inline">
                    @foreach (var e in Model.EBanks)
                    {
                        <li>
                            <label title="@(e.PaymentBank.Name)">
                                <input type="radio" name="ebank" value="@(e.Id)" data-platform="@(e.PlatformId)"/>
                                <img alt="@(e.PaymentBank.Name)" src="@(WebSite.Static + e.PaymentBank.Image)" />
                            </label>
                        </li>
                    }
                </ul>
            </div>
            <div class="row-fluid">
                <div class="offset1 span3">
                    <input type="hidden" id="package" name="package" value="0" />
                    <button class="btn btn-large" type="submit">
                        下一步</button></div>
                <div class="span8">
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
@section css{
    @Url.Sk().StaticCss("messenger")
    @Url.Sk().StaticCss("messenger-theme-future")
}
@section js{
    @Url.Sk().StaticJs("backbone")
    @Url.Sk().StaticJs("messenger")
    <script type="text/javascript">
        function setPackage(obj, val) {
            $('.package-item').removeClass('package-item-selected');
            $(obj).addClass('package-item-selected');
            document.getElementById('package').value = val;
        }

        function rechargeSubmit(form) {
            if ($("input:checked").length != 1) {
                $.globalMessenger().post({
                    type: 'error',
                    hideAfter: 3,
                    showCloseButton: true,
                    message: '请选择一种充值方式！'
                });
                return false;
            }
            return true;
        }
    </script>
}
